<template>
	<view class="home">
		<view class="topNav">
			<u-tabs
				:list="navlist"
				@click="navChange"
				:activeStyle="{
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.08)'
				}"
				:inactiveStyle="{
					color: '#888',
					transform: 'scale(1)'
				}"
			></u-tabs>
		</view>
		<view class="loading_state" v-show="loadingState">
			<u-skeleton rows="4" title avatar></u-skeleton>
		</view>
		<view class="content">
			<view class="item" v-for="item in dataList">
				<!-- 使用sync修饰符传递值 内部使用update:xxx派发值 -->
				<blog-item :item="item" @delEvent="delEvent" :isLike.sync="item.isLike" :like_count.sync="item.like_count"></blog-item>
			</view>
		</view>
		<view>
			<uni-load-more :status="moreState"></uni-load-more>
		</view>
		<view class="edit" @click="goEdit">
			<text class="iconfont icon-a-21-xiugai"></text>
		</view>
	</view>
</template>

<script>
const db = uniCloud.database();
// 查询筛选指令
const dbCmd = db.command;
import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js';
export default {
	data() {
		return {
			loadingState: true,
			noMore: false,
			moreState: 'more',
			navlist: [
				{
					name: '最新',
					type: 'publish_date'
				},
				{
					name: '热门',
					type: 'view_count'
				}
			],
			dataList: [],
			navIndex: 0
		};
	},
	onLoad() {
		this.getData();
	},
	// 下拉触底
	onReachBottom() {
		console.log('下拉触底');
		this.moreState = 'loading';
		// 没有数据后不再请求，改变状态
		if (this.noMore) {
			this.moreState = 'noMore';
			return;
		}
		this.getData();
	},
	methods: {
		// 子传父 刷新列表
		delEvent() {
			this.dataList = [];
			this.getData();
		},
		// tab切换
		navChange(item) {
			console.log(item);
			this.navIndex = item.index;
			this.loadingState = true;
			this.noMore = false;
			this.moreState = 'more';
			this.dataList = [];
			this.getData();
		},
		// 去详情
		goEdit() {
			uni.navigateTo({
				url: '/pages/edit/edit'
			});
		},
		// 获取数据
		async getData() {
			try {
				//联表查询 此处 article  users 就是一个临时表("只支持字符串，user_id必须传关联_id")
				let artTemp = db
					.collection('quanzi_artcle')
					.where(`delStatus!=true`)
					.field('user_id,title,picurls,description,view_count,like_count,comment_count,publish_date')
					.getTemp();
				let userTemp = db.collection('uni-id-users').field('_id,username,avatar_file,nickname').getTemp();
				// 虚拟联表：主表与副表联表产生的表，(主表，副表)
				console.log(this.navlist[this.navIndex].type);
				let res = await db
					.collection(artTemp, userTemp)
					.orderBy(this.navlist[this.navIndex].type, 'desc')
					.skip(this.dataList.length || 0)
					.limit(5)
					.get();
				// 没有数据后不再请求
				if (res.result.data && res.result.data.length == 0) {
					this.noMore = true;
				}
				// 旧的数据
				let oldArr = this.dataList;
				// 旧的数据 + 新的数据 完成上拉触底
				let resultData = [...oldArr, ...(res.result.data || [])];
				// 登录的情况下在查询点赞状态
				if (store.hasLogin) {
					// 所有的文章id
					let idArr = [];
					resultData.forEach((item) => {
						idArr.push(item._id);
					});
					// 利用筛选属性获取所有点过赞的文章，并且是该用户点赞
					let likeList = await db
						.collection('quanzi_like')
						.where({
							article_id: dbCmd.in(idArr),
							user_id: uniCloud.getCurrentUserInfo().uid
						})
						.get();

					// 获取点赞的索引值 并对对应文章添加标识
					likeList.result.data.forEach((item) => {
						let findIndex = resultData.findIndex((find) => item.article_id === find._id);
						console.log(findIndex, 'findIndex');
						resultData[findIndex].isLike = true;
					});
					console.log(resultData, '============');
				}

				this.dataList = resultData;
				this.loadingState = false;
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.home {
	.topNav {
		margin-bottom: 30rpx;
	}
	.loading_state {
		padding: 30rpx;
	}
	.content {
		.item {
			padding: 30rpx;
			border-bottom: #f7f7f7 10rpx solid;
		}
	}
	.edit {
		width: 120rpx;
		height: 120rpx;
		background-color: #2953ef;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		font-style: 50rpx;
		position: fixed;
		right: 60rpx;
		bottom: 150rpx;
		font-size: 50rpx;
		box-shadow: 0 0 20rpx rgba(1, 153, 254, 0.8), 0 0 10rpx rgba(41, 153, 254, 0.8);
		.iconfont {
			font-size: 50rpx;
		}
	}
}
</style>
